<template>
	<view class="">
		<image src="../../static/img/goodsInfo/update.png" mode="widthFix" class="bgimgBox"></image>
		<!-- 轮播图 -->
		<view class="swiper">
			<view class="swiper-box">
				<swiper circular="true" :autoplay="true" @change="swiperChange">
					<swiper-item v-for="swiper in swiperList" :key="swiper.id">
						<image :src="swiper.img" @tap="toSwiper(swiper)"></image>
						<view class="info">
							<view class="">{{ swiper.title }}</view>
							<view class="cont">{{ swiper.cont }}</view>
						</view>
					</swiper-item>
				</swiper>

				<view class="indicator"><view class="dots" v-for="(swiper, index) in swiperList" :class="currentSwiper == index ? 'on' : ''" :key="index"></view></view>
				<view class="upNav">
					<image src="../../static/img/goodsInfo/navtabimg01.png"></image>
					<view class="row">
						<view class="navTitle">今日上新</view>
						<view class="cont">每天10点 新奇发布</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 每日上新 -->
		<view class="today">
			<view class="today-list" v-for="(row, index) in todayList" :key="index">
				<image :src="row.img" mode="widthFix"></image>
				<view class="plank">
					<view class="title">{{ row.title }}</view>
					<text class="cont">{{ row.cont }}</text>
					<view class="tags">
						<view v-for="(val, index2) in row.tags" :key="index2" class="tag">{{ val }}</view>
					</view>
					<view class="footer">
						<view class="price">
							<text>¥</text>
							{{ row.price }}
						</view>
						<view class="seeBtn" @click="goGoodsInfo(row.id)">立即查看</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 上新分类推荐 -->
		<view class="classify">
			<view class="classify-list" v-for="(row, index) in classifyList" :key="index" @click="goGoodsInfo(row.id)">
				<view class="imgbox">
					<image :src="row.img" mode="widthFix"></image>
					<view class="sort">{{ row.type }}</view>
				</view>
				<view class="cont">
					<view class="title">{{ row.title }}</view>
					<view class="price">¥{{ row.price }}</view>
				</view>
			</view>
		</view>
		<!-- 新品排行 -->
		<view class="rank">
			<view class="upNav">
				<image src="../../static/img/goodsInfo/navtabimg02.png"></image>
				<view class="row">
					<view class="navTitle">15日新品榜</view>
					<view class="cont">品质尖货人人爱</view>
				</view>
			</view>
			<view class="rank-list" v-for="(row, index) in rankList" :key="index" @click="goGoodsInfo(row.id)">
				<view class="imgbox">
					<image :src="row.img" mode="widthFix"></image>
					<image v-if="index == 0" src="../../static/img/goodsInfo/top01.png" mode="widthFix" class="topimg"></image>
					<image v-if="index == 1" src="../../static/img/goodsInfo/top02.png" mode="widthFix" class="topimg"></image>
					<image v-if="index == 2" src="../../static/img/goodsInfo/top03.png" mode="widthFix" class="topimg"></image>
					<view v-if="!(index == 0 || index == 1 || index == 2)" class="rank-tag">{{ index + 1 }}</view>
				</view>
				<view class="plank">
					<view class="title">{{ row.title }}</view>
					<text class="cont">{{ row.cont }}</text>
					<view class="tags">
						<view v-for="(val, index2) in row.tags" :key="index2" class="tag">{{ val }}</view>
					</view>
					<view class="footer">
						<view class="price">
							<text>¥</text>
							{{ row.price }}
						</view>
						<view class="oldPrice">¥{{ row.oldPrice }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 店铺 -->
		<view class="shop">
			<view class="nav-head">
				品牌上新
				<text>匠心品牌 诚意奉上</text>
			</view>
			<view class="shop-item" v-for="(row, index) in shopList" :key="index">
				<view class="head">
					<image :src="row.img" mode="widthFix"></image>
					<view class="plank">
						<view class="title">{{ row.title }}</view>
						<view class="cont">{{ row.cont }}</view>
					</view>
					<view class="goshop">
						进店
						<uni-icons type="arrowright" size="14" color="#9a8158"></uni-icons>
					</view>
				</view>
				<view class="goods">
					<view class="goods-item" v-for="(row, index) in row.list" :key="index" @click="goGoodsInfo(row.id)">
						<view class="imgbox"><image :src="row.img" mode="widthFix"></image></view>
						<view class="cont">
							<view class="title">{{ row.title }}</view>
							<view class="price">¥{{ row.price }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- tab列表 -->
		<scroll-view scroll-with-animation scroll-x class="topTabBar" @scroll="scrollMove" :scroll-left="scrollLeft">
			<view class="innerBox">
				<view class="grid" :class="[tbIndex == tabbarIndex ? 'on' : '']" v-for="(item, tbIndex) in tabType" :key="tbIndex" :id="'ele' + tbIndex" @tap="showType(tbIndex)">
					<view class="text">{{ item.title }}</view>
				</view>
			</view>
		</scroll-view>
		<!-- 推荐 -->
		<view class="product-list">
				<view class="product" v-for="product in productList" :key="product.goods_id" @tap="toGoods(product)">
					<view class="imgBox">
						<image mode="widthFix" :src="product.img"></image>
						<view class="tagBox">
							<view class="tags" :class="item.type == 'red' ? 'red' : item.type == 'yellow' ? 'yellow' : 'green'" v-for="(item, index) in product.tags" :key="index">
								{{ item.title }}
							</view>
						</view>
					</view>
					<view class="name">{{ product.name }}</view>
					<view class="cont">{{ product.cont }}</view>
					<view class="info">
						<view class="price">{{ product.price }}</view>
						<view class="slogan">{{ product.slogan }}</view>
					</view>
				</view>
			</view>
			<view class="loading-text">{{ loadingText }}</view>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentSwiper: 0,
			// 轮播图片
			swiperList: [
				{ id: 1, src: 'url1', img: '/static/img/goodsInfo/lunbo01.jpeg', title: '360全方位净化器', cont: '有效去除病毒甲醛' },
				{ id: 2, src: 'url2', img: '/static/img/goodsInfo/lunbo02.jpeg', title: '席梦思真皮沙发', cont: '高端家具量身打造' },
				{ id: 3, src: 'url3', img: '/static/img/goodsInfo/lunbo03.jpeg', title: '360运动蓝牙耳机', cont: '智能降噪轻松一刻' }
			],
			// 今日上新
			todayList: [
				{
					img: '/static/img/goods/p1.jpg',
					title: '小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S',
					cont: '高颜值设计，智能米家APP智联高颜值设计，智能高颜值设计，智能高颜值设计，智能',
					tags: ['预售'],
					price: '1999',
				},
				{
					img: '/static/img/goods/p2.jpg',
					title: '小米电动滑板车1S',
					cont: '高颜值设计，智能米家APP智联',
					price: '2999'
				},
				{
					img: '/static/img/goods/p3.jpg',
					title: '小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S',
					cont: '高颜值设计，智能米家APP智联',
					tags: ['预售'],
					price: '1999'
				},
				{
					img: '/static/img/goods/p4.jpg',
					title: '小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S',
					cont: '高颜值设计，智能米家APP智联',
					price: '999'
				}
			],
			// 上新分类推荐
			classifyList: [
				{
					img: '/static/img/goods/p1.jpg',
					title: '小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S',
					type: '陶瓷不沾',
					price: '1999'
				},
				{
					img: '/static/img/goods/p2.jpg',
					title: '小米电动滑板车1S',
					cont: '高颜值设计，智能米家APP智联',
					type: '抑制细菌',
					price: '2999'
				},
				{
					img: '/static/img/goods/p3.jpg',
					title: '小米电动滑板车1S',
					type: '接口丰富',
					price: '1999'
				},
				{
					img: '/static/img/goods/p4.jpg',
					title: '男子技能休闲长裤',
					type: '四面弹力面料',
					price: '999'
				},
				{
					img: '/static/img/goods/p5.jpg',
					title: '赠送替芯',
					type: '电动橡皮擦',
					price: '999'
				},
				{
					img: '/static/img/goods/p4.jpg',
					title: '笔记本扩展支架',
					type: '高效散热',
					price: '399'
				}
			],
			// 新品排行
			rankList: [
				{
					img: '/static/img/goods/p1.jpg',
					title: '小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S',
					cont: '高颜值设计，智能米家APP智联高颜值设计，智能高颜值设计，智能高颜值设计，智能',
					tags: ['特价', '促销'],
					price: '1999',
					oldPrice: '1200'
				},
				{
					img: '/static/img/goods/p2.jpg',
					title: '小米电动滑板车1S',
					cont: '高颜值设计，智能米家APP智联',
					price: '2999',
					oldPrice: '1200'
				},
				{
					img: '/static/img/goods/p3.jpg',
					title: '小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S',
					cont: '高颜值设计，智能米家APP智联',
					tags: ['特价'],
					price: '1999',
					oldPrice: '1200'
				},
				{
					img: '/static/img/goods/p4.jpg',
					title: '小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S',
					cont: '高颜值设计，智能米家APP智联',
					price: '999',
					oldPrice: '1200'
				},
				{
					img: '/static/img/goods/p5.jpg',
					title: '小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S',
					cont: '高颜值设计，智能米家APP智联',
					price: '999',
					oldPrice: '1200'
				}
			],
			// 店铺
			shopList: [
				{
					img: '../../static/img/category/02.png',
					id: '111',
					title: '华为官方自营店',
					cont: '引领时代潮流！',
					list: [
						{
							img: '/static/img/goods/p1.jpg',
							title: '小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S',
							type: '陶瓷不沾',
							price: '1999'
						},
						{
							img: '/static/img/goods/p2.jpg',
							title: '小米电动滑板车1S',
							cont: '高颜值设计，智能米家APP智联',
							type: '抑制细菌',
							price: '2999'
						},
						{
							img: '/static/img/goods/p3.jpg',
							title: '小米电动滑板车1S',
							type: '接口丰富',
							price: '1999'
						}
					]
				},
				{
					img: '../../static/img/category/03.png',
					id: '111',
					title: '小米官方自营店',
					cont: '小米为发烧而生！',
					list: [
						{
							img: '/static/img/goods/p1.jpg',
							title: '小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S',
							type: '陶瓷不沾',
							price: '1999'
						},
						{
							img: '/static/img/goods/p2.jpg',
							title: '小米电动滑板车1S',
							cont: '高颜值设计，智能米家APP智联',
							type: '抑制细菌',
							price: '2999'
						},
						{
							img: '/static/img/goods/p3.jpg',
							title: '小米电动滑板车1S',
							type: '接口丰富',
							price: '1999'
						}
					]
				}
			],
		scrollLeft: '',
		moveParams: {
			scrollLeft: 0, // scroll-view滚动的距离,默认为0,因为没有触发滚动
			subLeft: '', //点击元素距离屏幕左边的距离
			subHalfWidth: '', //点击元素的宽度一半
			screenHalfWidth: '' //屏幕宽度的一半
		},
		tabType: [
			{
				title: '推荐',
				cont: '猜你喜欢'
			},
			{
				title: '销量',
				cont: '销量排名'
			},
			{
				title: '电器',
				cont: '重塑生活'
			},
			{
				title: '生活',
				cont: '品质生活'
			},
			{
				title: '时尚',
				cont: '美妆搭配'
			},
			{
				title: '特惠',
				cont: '特惠专区'
			}
		],
		tabbarIndex: 0,
		//猜你喜欢列表
			productList: [
				{
					goods_id: 0,
					img: '/static/img/goods/p1.jpg',
					name: '商品名称商品名称商品名称商品名称商品名称',
					cont: '商品内容介绍商品内容介绍商品内容介绍',
					price: '￥168',
					slogan: '1235人付款',
					tags: [{ title: '特价', type: 'red' }, { title: '买增', type: 'yellow' }, { title: '限时购', type: 'green' }]
				},
				{
					goods_id: 1,
					img: '/static/img/goods/p2.jpg',
					name: '商品名称商品名称商品名称商品名称商品名称',
					cont: '商品内容介绍商品内容介绍商品内容介绍',
					price: '￥168',
					slogan: '1235人付款',
					tags: [{ title: '买增', type: 'yellow' }]
				},
				{
					goods_id: 2,
					img: '/static/img/goods/p3.jpg',
					name: '商品名称商品名称商品名称商品名称商品名称',
					cont: '商品内容介绍商品内容介绍商品内容介绍',
					price: '￥168',
					slogan: '1235人付款',
					tags: [{ title: '限时购', type: 'green' }]
				},
				{
					goods_id: 3,
					img: '/static/img/goods/p4.jpg',
					name: '商品名称商品名称商品名称商品名称商品名称',
					cont: '商品内容介绍商品内容介绍商品内容介绍',
					price: '￥168',
					slogan: '1235人付款'
				},
				{
					goods_id: 4,
					img: '/static/img/goods/p5.jpg',
					name: '商品名称商品名称商品名称商品名称商品名称',
					cont: '商品内容介绍商品内容介绍商品内容介绍',
					price: '￥168',
					slogan: '1235人付款',
					tags: [{ title: '特价', type: 'red' }]
				},
				{
					goods_id: 5,
					img: '/static/img/goods/p6.jpg',
					name: '商品名称商品名称商品名称商品名称商品名称',
					cont: '商品内容介绍商品内容介绍商品内容介绍',
					price: '￥168',
					slogan: '1235人付款',
					tags: [{ title: '买增', type: 'yellow' }]
				},
			],
			loadingText: '正在加载...'
		
		};
	},
	onPageScroll(e) {
		// 判断tab分类位置
	},
	//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
	onReachBottom() {
		uni.showToast({ title: '触发上拉加载' });
		let len = this.productList.length;
		if (len >= 40) {
			this.loadingText = '到底了';
			return false;
		}
		// 演示,随机加入商品,生成环境请替换为ajax请求
		let end_goods_id = this.productList[len - 1].goods_id;
		for (let i = 1; i <= 10; i++) {
			let goods_id = end_goods_id + i;
			let p = {
				goods_id: goods_id,
				img: '/static/img/goods/p' + (goods_id % 10 == 0 ? 10 : goods_id % 10) + '.jpg',
				name: '商品名称商品名称商品名称商品名称商品名称',
				price: '￥168',
				slogan: '1235人付款'
			};
			this.productList.push(p);
		}
	},
	
	onLoad: function(option) {
		//option为object类型，会序列化上个页面传递的参数
		console.log(option.cid); //打印出上个页面传递的参数。
		uni.setNavigationBarTitle({
			title: option.name
		});
	},
	onReady() {
		// 获取tab距顶部高度
		this.getTabHeight();
		// 获取屏幕宽度
		this.getScreenWidth();
	},
	methods: {
		swiperChange(event) {
			this.currentSwiper = event.detail.current;
		},
		//轮播图跳转
		toSwiper(e) {
			uni.showToast({ title: e.src, icon: 'none' });
		},
		goGoodsInfo(id) {
			uni.navigateTo({
				url: `/pages/goods/goods?${id}`,
				success: res => {},
				fail: () => {}
			});
		},
		getTabHeight() {
			var that = this;
			uni
				.createSelectorQuery()
				.select('.topTabBar')
				.boundingClientRect(function(e) {
					that.tabHeight = e.top;
				})
				.exec();
		},
		getScreenWidth() {
			var that = this;
			uni.getSystemInfo({
				success(res) {
					let moveParams = that.moveParams;
					moveParams.screenHalfWidth = res.screenWidth / 2;
				}
			});
		},
		getRect(ele) {
			//获取点击元素的信息,ele为传入的id
			var that = this;
			uni
				.createSelectorQuery()
				.select(ele)
				.boundingClientRect(function(rect) {
					let moveParams = that.moveParams;
					moveParams.subLeft = rect.left;
					moveParams.subHalfWidth = rect.width / 2;
					that.moveTo();
				})
				.exec();
		},
		scrollMove(e) {
			let moveParams = this.moveParams;
			moveParams.scrollLeft = e.detail.scrollLeft;
			this.moveParams = moveParams;
		},
		moveTo() {
			let subLeft = this.moveParams.subLeft;
			let screenHalfWidth = this.moveParams.screenHalfWidth;
			let subHalfWidth = this.moveParams.subHalfWidth;
			let scrollLeft = this.moveParams.scrollLeft;
			let distance = subLeft - screenHalfWidth + subHalfWidth;
			scrollLeft = scrollLeft + distance;
			this.scrollLeft = scrollLeft;
		},
		// tab切换
		showType(tbIndex) {
			this.tabbarIndex = tbIndex;
			let ele = 'ele' + tbIndex;
			this.getRect('#' + ele);
			// this.list = this.orderList[tbIndex];
		},
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #f4f4f4;
}
.bgimgBox {
	width: 100%;
	display: block;
	margin-top: -60upx;
}
.swiper {
	width: 100%;
	display: flex;
	justify-content: center;
	position: absolute;
	top: 170upx;
	.swiper-box {
		width: 100%;
		height: 50vw;
		// //兼容ios，微信小程序
		position: relative;
		z-index: 1;
		swiper {
			width: 100%;
			height: 50vw;
			swiper-item {
				width: 100%;
				height: 100%;
				padding: 0 28upx;
				box-sizing: border-box;
				overflow: hidden;
				image {
					width: 100%;
					height: 50vw;
					border-radius: 10upx;
					z-index: -1;
				}
				.info {
					color: #fff;
					margin-top: -110upx;
					text-align: center;
					.cont {
						font-size: 28upx;
						color: #e6e4e7;
					}
				}
			}
		}
		.indicator {
			position: absolute;
			bottom: -80upx;
			left: 50%;
			transform: translateX(-50%);
			overflow: hidden;
			display: flex;
			.dots {
				width: 40upx;
				height: 8upx;
				margin: 20upx;
				border-radius: 10upx;
				background-color: rgba(255, 255, 255, 1);
				transition: all 0.3s ease-out;
				&.on {
					width: 80upx;
					background-color: #f3df00;
				}
			}
		}
		.upNav {
			position: absolute;
			left: 20upx;
			right: 20upx;
			bottom: -210upx;
			image {
				display: flex;
				width: 100%;
				height: 100upx;
				opacity: 1;
				border-radius: 20upx 20upx 0upx 0upx;
				object-fit: cover;
			}
			.row {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 20upx;
				display: flex;
				align-items: flex-end;
				.navTitle {
					white-space: pre-wrap;
					box-sizing: border-box;
					display: block;
					flex-shrink: 0;
					font-size: 36upx;
					font-weight: bold;
					color: rgb(51, 51, 51);
				}
				.cont {
					white-space: pre-wrap;
					box-sizing: border-box;
					flex-shrink: 0;
					font-size: 26upx;
					line-height: 40upx;
					color: rgb(102, 102, 102);
					margin-left: 20upx;
				}
			}
		}
	}
}
// 今日上新
.today {
	background-color: #fff;
	margin: 0 20upx;
	padding: 20upx;
	.today-list {
		display: flex;
		margin-bottom: 20upx;
		&:last-child {
			margin-bottom: 0upx;
		}
		image {
			width: 220upx;
			height: 220upx;
			flex-shrink: 0;
			display: block;
			border-radius: 20upx;
		}
		.plank {
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			// justify-content: space-between;
			height: 220upx;
			margin-left: 20upx;
			overflow: hidden;
			.title {
				font-size: 30upx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
			.cont {
				display: inline-block;
				min-width: 10upx;
				background-color: #fcf6e4;
				color: #c2b091;
				font-size: 28upx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.tags {
				display: flex;
				.tag {
					color: #fff;
					width: 60upx;
					text-align: center;
					flex-shrink: 0;
					margin: 5upx;
					flex-grow: 0;
					background-color: #cc463c;
					font-size: 20upx;
					border-radius: 5upx;
				}
			}
			.footer {
				margin-top: auto;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.price {
					font-size: 38upx;
					font-weight: bold;
					color: #ff0000;
					text {
						font-size: 28upx;
						font-weight: 400;
					}
				}
				.seeBtn {
					font-size: 26upx;
					background-color: #000000;
					background-image: linear-gradient(to right, #efd797, #ddb151);

					padding: 5upx 20upx;
					border-radius: 10upx;
					color: #fff;
				}
			}
		}
	}
}
// 上新分类推荐
.classify {
	background-color: #f5e3b3;
	margin: 0 20upx;
	padding: 20upx;
	padding-bottom: 0upx;
	display: flex;
	flex-wrap: wrap;
	.classify-list {
		width: 32%;
		margin-right: 2%;
		flex-shrink: 0;
		border-radius: 20upx;
		margin-bottom: 20upx;
		overflow: hidden;
		&:nth-child(3n) {
			margin-right: 0;
		}
		.imgbox {
			position: relative;
			width: 100%;
			// height: 100upx;
			image {
				width: 100%;
				display: block;
				// height: 100%;
			}
			.sort {
				position: absolute;
				bottom: -20upx;
				left: 20upx;
				right: 20upx;
				height: 40upx;
				text-align: center;
				background-color: #f9d983;
				font-size: 24upx;
				border-radius: 20upx;
			}
		}
		.cont {
			background-color: #fdf4e3;
			overflow: hidden;
			padding: 10upx;
			text-align: center;
			.title {
				margin-top: 10upx;
				font-size: 26upx;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}
			.price {
				color: #b22f26;
				font-size: 34upx;
			}
		}
	}
}
// 新品排行
.rank {
	background-color: #fff;
	margin: 0 20upx;
	padding: 20upx;
	.upNav {
		position: relative;
		margin: 0 -20upx;
		image {
			display: flex;
			width: 100%;
			height: 100upx;
			opacity: 1;
			border-radius: 20upx 20upx 0upx 0upx;
			object-fit: cover;
		}
		.row {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 20upx;
			display: flex;
			align-items: flex-end;
			.navTitle {
				white-space: pre-wrap;
				box-sizing: border-box;
				display: block;
				flex-shrink: 0;
				font-size: 36upx;
				font-weight: bold;
				color: rgb(51, 51, 51);
			}
			.cont {
				white-space: pre-wrap;
				box-sizing: border-box;
				flex-shrink: 0;
				font-size: 26upx;
				line-height: 40upx;
				color: rgb(102, 102, 102);
				margin-left: 20upx;
			}
		}
	}

	.rank-list {
		display: flex;
		margin-bottom: 20upx;
		&:last-child {
			margin-bottom: 0upx;
		}
		.imgbox {
			position: relative;
			width: 220upx;
			height: 220upx;
			image {
				width: 220upx;
				height: 220upx;
				flex-shrink: 0;
				display: block;
				border-radius: 20upx;
			}
			.topimg {
				position: absolute;
				top: 0;
				left: 0;
				width: 80upx;
			}
			.rank-tag {
				background-color: #faf4ea;
				color: #c0985d;
				text-align: center;
				width: 80upx;
				height: 50upx;
				position: absolute;
				top: 0;
				left: 0;
				width: 80upx;
				&:before {
					position: absolute;
					bottom: -30upx;
					left: 0upx;
					content: '';
					border-right: 42upx solid #faf4ea;
					border-bottom: 30upx solid transparent;
				}
				&::after {
					position: absolute;
					bottom: -30upx;
					right: 0upx;
					content: '';
					border-left: 42upx solid #faf4ea;

					border-bottom: 30upx solid transparent;
				}
			}
		}

		.plank {
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			height: 220upx;
			margin-left: 20upx;
			overflow: hidden;
			.title {
				font-size: 30upx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
			.cont {
				display: inline-block;
				min-width: 10upx;
				color: #999;
				font-size: 28upx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.tags {
				display: flex;
				.tag {
					color: #fff;
					width: 60upx;
					text-align: center;
					flex-shrink: 0;
					margin: 5upx;
					flex-grow: 0;
					background-color: #cc463c;
					font-size: 20upx;
					border-radius: 5upx;
				}
			}
			.footer {
				margin-top: auto;
				display: flex;
				align-items: flex-end;
				.price {
					font-size: 38upx;
					font-weight: bold;
					color: #ff0000;
					text {
						font-size: 28upx;
						font-weight: 400;
					}
				}
				.oldPrice {
					margin-left: 20upx;
					font-size: 32upx;
					text-decoration: line-through;
					color: #999;
				}
			}
		}
	}
}
// 店铺
.shop {
	.nav-head {
		font-size: 36upx;
		font-weight: bold;
		padding: 20upx;
		text {
			font-size: 26upx;
			color: #434342;
			margin-left: 20upx;
		}
	}
	.shop-item {
		margin: 20upx;
		margin-top: 0;
		padding: 20upx;
		border-radius: 20upx;
		background-color: #fff;
		.head {
			display: flex;
			align-items: center;
			image {
				width: 80upx;
				height: 80upx;
				border-radius: 50%;
			}
			.plank {
				margin-left: 20upx;
				.title {
					font-size: 32upx;
					font-weight: bold;
				}
				.cont {
					font-size: 26upx;
					color: #666;
				}
			}
			.goshop {
				font-size: 28upx;
				color: #9a8158;
				margin-left: auto;
			}
		}
		.goods {
			display: flex;
			flex-wrap: wrap;
			padding-top: 20upx;
			.goods-item {
				width: 32%;
				margin-right: 2%;
				flex-shrink: 0;
				border-radius: 20upx;
				overflow: hidden;
				&:nth-child(3n) {
					margin-right: 0;
				}
				.imgbox {
					position: relative;
					width: 100%;
					// height: 100upx;
					image {
						width: 100%;
						display: block;
						// height: 100%;
					}
				}

				.cont {
					overflow: hidden;
					padding: 10upx;
					text-align: center;
					.title {
						margin-top: 10upx;
						font-size: 26upx;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}
					.price {
						color: #b22f26;
						font-size: 34upx;
					}
				}
			}
		}
	}
}
// tab切换
.topTabBar {
		width: 95%;
		margin: 0upx auto;
		// background-color: #fff;
		height: 100upx;
		display: flex;
		overflow: auto;

		&.fixed {
			position: fixed;
			top: 80upx;
			z-index: 10;
			width: 100%;
			background-color: #fff;
		}
		.innerBox {
			display: flex;
			.grid {
				flex: 1;
				min-width: 20%;
				height: 90upx;
				font-size: 28upx;
				text-align: center;
				flex-shrink: 0;
				transition: all 0.2s ease;
				.text {
					height: 90upx;
					line-height: 90upx;
				}
				.cont {
					color: #444;
					font-size: 24upx;
				}
				&.on {
					font-size: 36upx;
					color: #e91a28;
					border-bottom: solid 4upx #e91a28;
				}
			}
		}
	}

// 推荐
.product-list {
		margin-top: 20upx;
		width: 92%;
		padding: 0 4% 3vw 4%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.product {
			width: 48%;
			border-radius: 20upx;
			background-color: #fff;
			margin: 0 0 20upx 0;
			box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.1);
			.imgBox {
				position: relative;
				image {
					width: 100%;
					border-radius: 20upx 20upx 0 0;
				}
				.tagBox {
					position: absolute;
					left: 2upx;
					bottom: 10upx;
					width: 100%;
					.tags {
						padding: 2upx 10upx;
						font-size: 24upx;
						margin-right: 10upx;
						border-radius: 5upx;
						color: #fff;
						display: inline-block;
						&.red {
							background-color: #d85f61;
						}
						&.yellow {
							background-color: #ffcc4a;
						}
						&.green {
							background-color: #6fd85f;
						}
					}
				}
			}

			.name {
				width: 92%;
				padding: 10upx 4%;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				text-align: justify;
				overflow: hidden;
				font-size: 30upx;
			}
			.cont {
				width: 92%;
				padding: 0upx 4%;
				font-size: 28upx;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				color: #666;
			}
			.info {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				width: 92%;
				padding: 10upx 4% 10upx 4%;

				.price {
					color: #e65339;
					font-size: 30upx;
					font-weight: 600;
				}
				.slogan {
					color: #807c87;
					font-size: 24upx;
				}
			}
		}
	}
	
	.loading-text {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60upx;
		color: #979797;
		font-size: 24upx;
	}


</style>
